import QtQuick 2.0
import QtQuick.Window 2.0
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtQuick.Extras 1.4

Item {
    id: root

    property real meter_value: 0
    property real meterMaxValue: 250
    property real meterMinValue: -250
    property string underMeterText: "RPM"
    Rectangle {
        id: meter_rect
        width: parent.width
        height: parent.height
        color: "lightgray"
        Row{               //水平布局
            id: gaugeRow
            spacing: 10    //相邻组件的间隔像素
            anchors.top: parent.top
//            anchors.leftMargin: 4
            CircularGauge {
                id: speedometer_1
                value:meter_value
//                anchors.fill:parent         //填充父类，会根据父类的width和height来调整大小
                minimumValue: meterMinValue
                maximumValue: meterMaxValue
                width: 150
                height: 150
                Behavior on value {    //数值改变动画
                    NumberAnimation{
                        duration: 3000
                    }
                }

                style: DashboardGaugeStyle {   //设置样式
                    id:dashboard_1
                    underCirculText:underMeterText     //设置文本
                    labelStepSize: (speedometer_1.maximumValue-speedometer_1.minimumValue)/10  //设置刻度线数字显示的间隔
                    tickmarkStepSize: (speedometer_1.maximumValue-speedometer_1.minimumValue)/10  //设置刻度线显示间隔
                }

            }
            CircularGauge {
                id: speedometer_2
                value:meter_value
//                anchors.fill:parent         //填充父类，会根据父类的width和height来调整大小
                minimumValue: meterMinValue
                maximumValue: meterMaxValue
                width: 150
                height: 150
                Behavior on value {    //数值改变动画
                    NumberAnimation{
                        duration: 3000
                    }
                }

                style: DashboardGaugeStyle {   //设置样式
                    id:dashboard_2
                    underCirculText:underMeterText     //设置文本
                    labelStepSize: (speedometer_2.maximumValue-speedometer_2.minimumValue)/10  //设置刻度线数字显示的间隔
                    tickmarkStepSize: (speedometer_2.maximumValue-speedometer_2.minimumValue)/10  //设置刻度线显示间隔
                }

            }
            CircularGauge {
                id: speedometer_3
                value:meter_value
//                anchors.fill:parent         //填充父类，会根据父类的width和height来调整大小
                minimumValue: meterMinValue
                maximumValue: meterMaxValue
                width: 150
                height: 150
                Behavior on value {    //数值改变动画
                    NumberAnimation{
                        duration: 3000
                    }
                }

                style: DashboardGaugeStyle {   //设置样式
                    id:dashboard_3
                    underCirculText:underMeterText     //设置文本
                    labelStepSize: (speedometer_3.maximumValue-speedometer_3.minimumValue)/10  //设置刻度线数字显示的间隔
                    tickmarkStepSize: (speedometer_3.maximumValue-speedometer_3.minimumValue)/10  //设置刻度线显示间隔
                }

            }
            CircularGauge {
                id: speedometer_4
                value:meter_value
//                anchors.fill:parent         //填充父类，会根据父类的width和height来调整大小
                minimumValue: meterMinValue
                maximumValue: meterMaxValue
                width: 150
                height: 150
                Behavior on value {    //数值改变动画
                    NumberAnimation{
                        duration: 3000
                    }
                }

                style: DashboardGaugeStyle {   //设置样式
                    id:dashboard_4
                    underCirculText:underMeterText     //设置文本
                    labelStepSize: (speedometer_4.maximumValue-speedometer_4.minimumValue)/10  //设置刻度线数字显示的间隔
                    tickmarkStepSize: (speedometer_4.maximumValue-speedometer_4.minimumValue)/10  //设置刻度线显示间隔
                }

            }

        }


    }
}

